<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console2.css"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .separateInTheCenter {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .pear-container {
            margin: 15px;
            width: calc(100vw - 30px);
        }

        body {
            font-family: Source Han Sans SC, Source Han Sans SC;
        }

        .gridImg {
            height: 8px;
        }

        .pear-card2 {
            height: 100px;
        }

        .messageContent {
            font-size: 16px;
            color: #373B46;
        }

        .messageStatus {
            font-size: 16px;
            color: #858A98;
        }

        .message .separateInTheCenter:nth-child(n+2) {
            margin-top: 10px;
        }

        .workbench {
            height: 100px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .workbench .category {
            font-size: 16px;
            color: #6B7080;
        }

        .workbench .number {
            font-size: 32px;
            height: 100%;
            margin-top: 15px;
        }
        .layui-table-header, .layui-table-header th {
            background-color: #F6F7FC !important;
        }
        .layui-table-header{
            border-radius: 5px 5px 5px 5px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        工作台
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console2/网格.png" alt="" style="max-width: 100%;" class="gridImg">
                </div>
                <div class="layui-row layui-col-space30" style="margin: 21px 12px 11px">
                    <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                        <div class="pear-card2">
                            <div class="layui-row workbench">
                                <div class="layui-col-xs8">
                                    <div class="category">借阅数量</div>
                                    <div class="number" style="color: #F36452">566</div>
                                </div>
                                <div class="layui-col-xs4">
                                    <img src="/img/console2/借阅数量.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                        <div class="pear-card2">
                            <div class="layui-row workbench">
                                <div class="layui-col-xs8">
                                    <div class="category">待还档案数</div>
                                    <div class="number" style="color: #FE962C">12</div>
                                </div>
                                <div class="layui-col-xs4">
                                    <img src="/img/console2/待还档案数量.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                        <div class="pear-card2">
                            <div class="layui-row workbench">
                                <div class="layui-col-xs8">
                                    <div class="category">即将到期数量</div>
                                    <div class="number" style="color: #39B4FF">34</div>
                                </div>
                                <div class="layui-col-xs4">
                                    <img src="/img/console2/即将到期数量.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
                        <div class="pear-card2">
                            <div class="layui-row workbench">
                                <div class="layui-col-xs8">
                                    <div class="category">待处理</div>
                                    <div class="number" style="color: #39B4FF">343654</div>
                                </div>
                                <div class="layui-col-xs4">
                                    <img src="/img/console2/待处理.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm12  layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        消息
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console2/消息-网格.png" alt="" style="max-width: 100%;" class="gridImg">
                </div>
                <div class="layui-row message" style="margin: 20px 12px">
                    <div class="layui-col-sm4 layui-col-md12 separateInTheCenter">
                        <div class="messageContent">借阅申请-2024-07-30-提交了某某内容借阅申请...</div>
                        <div class="messageStatus">待审批</div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md12 separateInTheCenter">
                        <div class="messageContent">档案归还-2024-07-30-提交了某某内容档案归还...</div>
                        <div class="messageStatus">已完成</div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md12 separateInTheCenter">
                        <div class="messageContent">档案遗失-2024-07-30-某某内容档案遗失...</div>
                        <div class="messageStatus">未找回</div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md12 separateInTheCenter">
                        <div class="messageContent">超时未归还-2024-07-30-某某内容超时未归还...</div>
                        <div class="messageStatus">已超时</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        借阅预览
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console2/借阅预览-网格.png" alt="" style="max-width: 100%;" class="gridImg">
                </div>
                <div style="margin: 0px 12px">
                    <table id="borrowingPreviewTable" lay-filter="borrowingPreviewTable"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        超时未归还
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console2/借阅预览-网格.png" alt="" style="max-width: 100%;" class="gridImg">
                </div>
                <div style="margin: 0px 12px">
                    <table id="overdueNotReturned" lay-filter="overdueNotReturned"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        借阅续期
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console2/借阅预览-网格.png" alt="" style="max-width: 100%;" class="gridImg">
                </div>
                <div style="margin: 0px 12px">
                    <table id="borrowingAndRenewal" lay-filter="borrowingAndRenewal"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        超时
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console2/借阅预览-网格.png" alt="" style="max-width: 100%;" class="gridImg">
                </div>
                <div style="margin: 0px 12px">
                    <table id="overtime" lay-filter="overtime"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let borrowingPreviewTableCols = [
            [{title: '借阅人', field: 'username', align: 'center',},
                {title: '审核人', field: 'realName', align: 'center'},
                {title: '通讯信息', field: 'sex', align: 'center'},
                {title: '档案分类', field: 'phone', align: 'center'},
                {title: '档案名称', field: 'enable', align: 'center'},
                {title: '申请时间', field: 'login', align: 'center'},
                {title: '操作', toolbar: '#user-bar', align: 'center', width: 130}
            ]
        ]
        //借阅预览
        table.render({
            elem: '#borrowingPreviewTable',
            url: '/admin/data/user.json',
            cols: borrowingPreviewTableCols,
            skin: 'line',
            id: 'borrowingPreviewTable',
            limit:5
        });
        //超时未归还
        let overdueNotReturnedCols = [
            [{title: '借阅人', field: 'id', align: 'center',},
                {title: '审核人', field: 'avatar', align: 'center'},
                {title: '通讯信息', field: 'title', align: 'center'},
                {title: '档案分类', field: 'context', align: 'center'},
                {title: '档案名称', field: 'form', align: 'center'},
                {title: '申请时间', field: 'time', align: 'center'},
                {title: '操作', toolbar: '#user-bar', align: 'center', width: 130}
            ]
        ]
        table.render({
            elem: '#overdueNotReturned',
            url: '/admin/data/user.json',
            cols: borrowingPreviewTableCols,
            skin: 'line',
            id: 'overdueNotReturned',
            limit:5
        });
        //借阅续期
        table.render({
            elem: '#borrowingAndRenewal',
            url: '/admin/data/user.json',
            cols: borrowingPreviewTableCols,
            skin: 'line',
            id: 'borrowingAndRenewal',
            limit:5
        });
        //超时未归还
        table.render({
            elem: '#overtime',
            url: '/admin/data/user.json',
            cols: borrowingPreviewTableCols,
            skin: 'line',
            id: 'overtime',
            limit:5
        });




    });
</script>
</body>
</html>